<template>
	<view>
		<!-- 轮播图 -->
		<view>
			<swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"
				indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#f5aa28">
				<swiper-item v-for="item in imgs" :key="item">
					<image :src="item" alt="" mode="widthFix" style="width: 100%;" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告栏 -->
		<view style="margin: 10px;">
			<view
				style="padding: 5px 10px; background-color: white;font-size: 12px; align-items: center; display: flex; border-radius: 5px">
				<!-- 加上align-items:center和display:flex 图标和文字就不错位了 -->
				<uni-icons type="sound" size="25"></uni-icons>
				<view>{{ notice }}</view>

			</view>

		</view>
		<!-- 分类列表 -->
		<!-- margin: 页面和view的距离,padding:view边缘和内容的距离,border-radius:边缘曲化  -->
		<!-- clickItem:点击事件,在前面要写@来绑定方法 -->
		<!-- <view style="margin: 5px 10px; border-radius: 5px; background-color: white; padding: 7px 0;">
			<uni-row>
				<uni-col :span="6">
					<view class="grid-item-box" @click="clickItem('时令水果')">
						<image src="../../static/image/水果.png" alt="" mode="widthFix" style="width: 50%;" />
						<text style="font-size: 13px; margin-top: 5px;">时令水果</text>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="grid-item-box" @click="clickItem('新鲜蔬菜')">
						<image src="../../static/image/蔬菜.png" alt="" mode="widthFix" style="width: 50%;" />
						<text style="font-size: 13px; margin-top: 5px;">新鲜蔬菜</text>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="grid-item-box" @click="clickItem('品质肉类')">
						<image src="../../static/image/肉类.png" alt="" mode="widthFix" style="width: 50%;" />
						<text style="font-size: 13px; margin-top: 5px;">品质肉类</text>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="grid-item-box" @click="clickItem('精美水产')">
						<image src="../../static/image/海鲜.png" alt="" mode="widthFix" style="width: 50%;" />
						<text style="font-size: 13px; margin-top: 5px;">精美水产</text>
					</view>
				</uni-col>
			</uni-row>
		</view> -->
		<view
			style="background-color: white; margin: 30rpx 85rpx; border-radius: 7px; box-shadow: 0 0 15px 10px #cdcdcd; ">
			<view
				style="margin: 10rpx 10rpx;padding: 10rpx 10rpx;text-align: center;font-size: 40rpx; font-weight: bold;">
				不知道想吃什么？<br />随机挑选一个!
			</view>
			<view style="display: flex;justify-content:center;align-items:center;" @click="">
				<image :src="randomShop.picture" alt=""
					style="height: 350rpx; width: 450rpx;  margin-bottom: 10rpx;margin-top: 10rpx; border-radius: 10px;" />

			</view>
			<view style="text-align:center;align-items: center;padding-bottom: 20rpx;">
				<text style="font-weight: bold;color: #aaaaaa;">
					{{randomShop.name}}
				</text>

			</view>
		</view>



		<!-- 商品列表 -->
		<!-- gutter: 两个col之间的间隔 -->
		<view style="text-align: right;align-items:center;">
			<text style="color: #aaaaaa;font-size: 34rpx;">请选择你所在的区域</text>
			<uni-icons type="forward" size="14" color="#8a8a7e"></uni-icons>
		</view>

		<view style="margin: 5px 20rpx; font-size: 12px;">
			<uni-row gutter="20">
				<uni-col :span="12">
					<view @click="intoNorthStreet()"
						style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;text-align: center;">
						<image src="../../static/image/水果.png" alt="" style="height: 250rpx; width: 250rpx;" />
						<view class="lineEllipsis">
							<text style="font-size: 39rpx; margin-top: 5px;font-weight: bold;">北区堕落街</text>
						</view>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view @click="intoSouthStreet()"
						style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;text-align: center;">
						<image src="../../static/image/海鲜.png" alt="" style="height: 250rpx; width: 250rpx;" />

						<view class="lineEllipsis">
							<text style="font-size: 39rpx; margin-top: 5px;font-weight: bold;">南区堕落街</text>
						</view>

					</view>
				</uni-col>
			</uni-row>
		</view>

		<!-- 选择南区还是北区 -->
		<!-- <view style="display: block;">
			<text>
				请选择你所在的区域
			</text>
			<uni-row gutter="10">
				<uni-col :span="12">
					<view style="background-color: white; margin: 30rpx 85rpx; border-radius: 7px; box-shadow: 0 0 15px 10px #cdcdcd; ">
						<image src="../../static/image/水果.png" alt="" style="height: 250rpx; width: 250rpx;" />
						<text style="font-size: 13px; margin-top: 5px;">北区堕落街</text>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view style="background-color: white; margin: 30rpx 85rpx; border-radius: 7px; box-shadow: 0 0 15px 10px #cdcdcd; ">
						<image src="../../static/image/海鲜.png" alt="" style="height: 250rpx; width: 250rpx;"/>
						<text style="font-size: 13px; margin-top: 5px;">南区堕落街</text>
					</view>
				</uni-col>
			</uni-row>
		</view> -->


	</view>
</template>

<script>
import { baseUrl } from '../../config/config'
	export default {
		data() {
			return {
				//图片路径
				imgs: [
					//在这里只支持相对引用和网络路径
					"../../static/image/1.jpg", "../../static/image/2.jpg", "../../static/image/3.jpg"
				],
				//公告内容
				notices: [{
						content: "公告1......."
					},
					{
						content: "公告2......."
					},
					{
						content: "公告3......."
					},
					{
						content: "公告4......."
					},
				],
				//一个notice属性,让公告内容轮换加载进这里
				notice: '',

				randomShop: {
					ID: 1,
					name: '蜜雪冰城',
					picture: '../../static/image/蜜雪冰城图片.jpeg',
					discription: '蜜雪冰城甜蜜蜜',
				}



			}
		},
		onLaunch() {
			//检查是否登录
			this.checkLogin()
		},
		onLoad() {

			//页面加载完后要调用的方法
			this.loadNotices()
		},
		methods: {
			//让公告5s换一次
			loadNotices() {
				let i = 0
				setInterval(() => {
					this.notice = this.notices[i++].content
					if (i === this.notices.length) {
						i = 0
					}
				}, 1000)
			},
			clickItem(item) {
				console.log(item)
			},
			addCart(item) {
				console.log(item + "已经添加到购物车")
			},
			intoNorthStreet() {
				uni.setStorageSync('topBarIndex',0)
				uni.switchTab({
					url: '/pages/category/category'
				})
			},
			intoSouthStreet() {
				uni.setStorageSync('topBarIndex',1)
				uni.switchTab({
					url: '/pages/category/category'
				})
			},
			checkLogin() {
				let token = uni.getStorageSync('token')
				if(token==null||token==void 0){
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				else {
					//调用后端检查token
				}
			}
		}
	}
</script>

<style>
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.lineEllipsis {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 超出几行省略 */
		overflow: hidden;
	}
</style>